// 简单的消息提示工具
export const message = {
  success(text) {
    this.show(text, 'success')
  },
  
  error(text) {
    this.show(text, 'error')
  },
  
  warning(text) {
    this.show(text, 'warning')
  },
  
  info(text) {
    this.show(text, 'info')
  },
  
  show(text, type = 'info') {
    // 创建消息元素
    const messageEl = document.createElement('div')
    messageEl.className = `message-toast message-${type}`
    messageEl.textContent = text
    
    // 添加样式
    Object.assign(messageEl.style, {
      position: 'fixed',
      top: '20px',
      left: '50%',
      transform: 'translateX(-50%)',
      padding: '12px 20px',
      borderRadius: '6px',
      color: 'white',
      fontWeight: '500',
      fontSize: '14px',
      zIndex: '9999',
      maxWidth: '500px',
      textAlign: 'center',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
      opacity: '0',
      transition: 'all 0.3s ease'
    })
    
    // 设置背景色
    const colors = {
      success: '#10b981',
      error: '#ef4444', 
      warning: '#f59e0b',
      info: '#3b82f6'
    }
    messageEl.style.background = colors[type] || colors.info
    
    // 添加到页面
    document.body.appendChild(messageEl)
    
    // 显示动画
    setTimeout(() => {
      messageEl.style.opacity = '1'
      messageEl.style.transform = 'translateX(-50%) translateY(0)'
    }, 10)
    
    // 自动消失
    setTimeout(() => {
      messageEl.style.opacity = '0'
      messageEl.style.transform = 'translateX(-50%) translateY(-20px)'
      setTimeout(() => {
        if (messageEl.parentNode) {
          document.body.removeChild(messageEl)
        }
      }, 300)
    }, 3000)
  }
} 